<template>
  <div class="box" v-loading='loading'>
    <div class="logbox">
      <div class="top-tx">自娱自乐后台</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-width="80px">
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model="ruleForm.username"> </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input :type="ople ? 'text' : 'password'" v-model="ruleForm.password" ref="input" @keyup.enter.native="signBtn"
          ></el-input>
          <img src="../assets/images/close.png" alt="" class="eye" v-if="ople" @click="close" />
          <img src="../assets/images/open.png" alt="" class="eye" v-else @click="open" />
        </el-form-item>
        <el-form-item label="确认密码" prop="newPassword" v-if="displayNone">
          <el-input
            type="password"
            v-model="ruleForm.newPassword"
            ref="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号身份" prop="userSession" v-if="displayNone">
            <el-radio v-model="ruleForm.userSession" label="0">游客</el-radio>
            <el-radio v-model="ruleForm.userSession" label="1">管理员</el-radio>
        </el-form-item>
        <el-form-item >
           <el-button class="btn" type="primary" @click="signBtn">{{signTX}}</el-button>
           <el-button class="btn" type="warning" @click="addBtn">{{addTx}}</el-button>
        </el-form-item>
      </el-form>
     
    </div>
  </div>
</template>

<script>
import { user, login  } from "@/api/login";
import { setItem } from '@/utils/token'
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    var checkAge = (rule, value, callback) => {
      if (value===this.ruleForm.password) {
        return callback()
      }
      callback(new Error('两次密码不一致'))
    }
    return {
      loading:false,
      displayNone: false,
      signTX:'登录',
      addTx:'注册',
      ruleForm: {
        username: '',
        password: '',
        userSession:'',
        newPassword: ''
      },
      ople: false,
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
          { validator: checkAge, trigger: 'blur' }
        ],
        userSession: [
          { required: true, message: "请选择账号身份", trigger: "blur" },
        ],
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  created() {},
  // 组件方法
  methods: {
    //   控制眼睛显示与隐藏
    open() {
      this.ople = true;
    },
    close() {
      this.ople = false;
    },
   async signBtn(){
      if(this.signTX === '去登录'){
          this.addTx = '注册'
          this.signTX = '登录'
          this.displayNone = false
        }else{
        this.$refs.ruleForm.validate( (val) => {
        if (!val) {
          return this.$messages.error('请确保字段正确以及完整性')
        }});
        try {
          this.loading = true
          const { data } = await login(this.ruleForm)
          if (data.status == '200'){
            setItem('token',data.token)
            this.$router.push('/home')
            this.$message.success(data.message)
          }
          this.loading = false
        } catch (error) {
          
        }
        
        }
      
    },
   async addBtn(){
      if(this.addTx === '注册'){
          this.$refs.ruleForm.resetFields()
          this.addTx = '确定'
          this.signTX = '去登录'
          this.displayNone = true
        }else{
          this.$refs.ruleForm.validate( (val) => {
          if (!val) {
            return this.$messages.error('请确保字段正确以及完整性')
          }});
          try {
            this.loading = true
            const { data } = await user(this.ruleForm)
            if (data.status == '200'){
            this.$refs.ruleForm.resetFields()
            this.$message.success(data.message)
            }
            this.loading = false
          } catch (error) {
            
          }
        }
      
        
    },
  },
  //操纵DOM元素写这里
  mounted() {},
};
</script> 

<style scoped lang="less">
.box{
  width: 100%;
  height: 100%;
}
.eye {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 6px;
}
/deep/.el-input__inner {
  padding-left: 30px;
}
.top-tx{
  font-size:50px;
  margin-bottom: 20px;
  color: #ccc;
}

.logbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display:flex;
  flex-direction: column;
}

/deep/.el-input__inner {
  width: 430px;
}
</style>